3-hexo添加自定义图标

杨晓东

yeloghexo

发布于：2020年12月28日

次浏览

一、前言

鉴于许多人问过如何添加自定义图标，这里就详细说明一下，以备后人乘凉。

这篇文章主要讲解是从 iconfont 添加图标。

二、添加彩色图标

2.1 登录并添加图标

访问 iconfont，点击如下图位置登录，可以使用 Github 账号登录。

登录成功后，搜索合适的图标，然后点击添加到购物车，如下图所示。

添加了多个后，可以点击右上角的“购物车”，添加到项目，点击加号创建项目，如下图所示。

添加完成后回到项目页面，找到自己刚刚创建的项目。

如果没有到项目页面，可以点击上面菜单进入：资源管理 -> 我的项目

2.2 引入 3-hexo 中

点击下载到本地，解压并复制其中的 iconfont.js 到项目 3-hexo/source/js/ 下，并改名 custom-iconfont.js。

在文件 3-hexo/layout/_partial/meta.ejs 最后追加下面一行。

<script src="<%=theme.blog_path?theme.blog_path.lastIndexOf("/") === theme.blog_path.length-1?theme.blog_path.slice(0, theme.blog_path.length-1):theme.blog_path:'' %>/js/custom-iconfont.js?v=<%=theme.version%>" ></script>

2.3 在配置文件中添加生效

修改 3-hexo/_config.yml 如下图所示

完成！

图标名如上面的 gitee 可以在网站上修改，如下图所示

三、添加黑白图标

link.theme=white

3.1 同 2.1

3.2 引入 3-hexo 中

点击生成代码，如下图所示。

复制生成的代码，修改 font-family 的值为 custom-iconfont，添加到 3-hexo/source/css/_partial/font.styl 最后，并写入图标信息，content 可以移到图标上进行复制，注意前面斜杠转译和去掉后面的分号。

@font-face {
  font-family: 'custom-iconfont';  /* project id 2298064 */
  src: url('//at.alicdn.com/t/font_2298064_34vkk4c9945.eot');
  src: url('//at.alicdn.com/t/font_2298064_34vkk4c9945.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2298064_34vkk4c9945.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2298064_34vkk4c9945.woff') format('woff'),
  url('//at.alicdn.com/t/font_2298064_34vkk4c9945.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2298064_34vkk4c9945.svg#iconfont') format('svg');
}
.icon-gitee:before {
  content: "\e602";
}

.icon-youtubeautored:before {
  content: "\e649";
}